<template>
  <el-table style="width: 100%" height="550"
    ref="gridDom"
    :data="dataList"
    highlight-current-row
    @current-change="handleCurrentChange"
  >
    <el-table-column label="字段" prop="colName"/>
    <el-table-column label="名称" prop="label" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click.stop="delCol(scope.row.id)"
          > X </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="addNew">添加</el-button>

  <!--弹窗，添加规则-->
  <col-item
    :model="gridItemModel"
    :dialogInfo="dialogInfo"
    :events="events"
  >
  </col-item>
   
</template>

<script lang="ts">
  import { defineComponent, reactive, watch, ref } from 'vue'

  import colItem from './grid-col-item.vue'
 
  export default defineComponent({
    name: 'nf-help-meta-grid-col',
    components: {
      colItem
    },
    props: {
      formMeta: [Object]
    },
    setup(props) {

      const { itemMeta, colOrder } = props.formMeta
      const gridDom = ref(null)

      // 把 meta 的 itemMeta 转换成数组
      const dataList = reactive([])
      // 依据itemMeta 获取列的数据
      watch(itemMeta, () => {
        dataList.length = 0
        for (const key in itemMeta) {
          const m = itemMeta[key]
          dataList.push({
            id: m.id,
            colName: m.colName,
            label: m.label
          })
        }
      }, {immediate:true})

      // 弹窗信息
      const dialogInfo = reactive({
        isShow: false,
        state: 'add',
        width: '30%',
        title: '添加列'
      })

      // 列的 model
      const gridItemModel = ref({})
      
      // 添加列
      const events = {
        add: () => {
          // 判断是添加还是修改
          if (dialogInfo.state === 'add') {
            const id = gridItemModel.value.id
            itemMeta[id] = gridItemModel.value
            // 
            colOrder.push(id)
          } else {

          }

        }
      }

      // 删除列
      const delCol = (id: number) => {
        console.log(id)
        const index = colOrder.indexOf(id)
        if (index >= 0) {
          colOrder.splice(index, 1)
        }
        delete itemMeta[id]
      }

      // 准备添加新列
      const addNew = () => {
        dialogInfo.isShow = true
        dialogInfo.state = 'add'
        dialogInfo.title = '添加列'
        gridItemModel.value = {}

        gridDom.value.setCurrentRow() // 设置单选

      }

      // 单选，用于修改
      const handleCurrentChange = (val) => {
        if (val) {
          // console.log(val)
          gridItemModel.value = itemMeta[val.id]
          dialogInfo.isShow = true
          dialogInfo.state = 'mod'
          dialogInfo.title = '修改列'

          setTimeout(() => {
            gridDom.value.setCurrentRow() // 设置单选
          }, 200)
        }
      }

      return {
        gridDom,
        gridItemModel,
        dataList,
        events,
        dialogInfo,
        delCol,
        addNew,
        handleCurrentChange
      }
    }
  })
</script>
 